<template>
	<view>
		<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
			<view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
				<view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
			</view>
			<view :style="{'width': swidth+'px','margin-bottom': 5 + 'px'}">
				<u-search border-color="#000000" :clearabled="false" :showAction="true" :animation="true"
					:value="keyword" @custom="searchBank" @search="searchBank"></u-search>
			</view>
		</view>
		<view class="dropdown1" :style="{'margin-top':capsuleTop+capsuleHeight+5+'px'}">
			<um-dropdown placeholder="综合" @change="fnChange" rangeKey="label" :optionList="listData"
				selectedItemStyle="color:2973F8;" />
			<text class="text1">价格</text>
			<text class="text1">新降价</text>
			<text class="text1">发布</text>
			<um-dropdown placeholder="区域" @change="fnChange" rangeKey="label" :optionList="listData"
				selectedItemStyle="color:2973F8;" />
		</view>
		<view class="dropdown1">
			<um-dropdown v-for="item,key in sizelist" :key="key" :placeholder="item.name" @change="fnChange"
				rangeKey="label" :optionList="item.content" selectedItemStyle="color:2973F8;" />
			<um-dropdown placeholder="筛选" @change="fnChange" rangeKey="label" :optionList="listData"
				selectedItemStyle="color:2973F8;" />
		</view>
		<view v-show="flag1" style="text-align: center;">
			<text>"没有搜索到对应的商品"</text>
		</view>
		<view class="waterfall" v-show="flag2">
			<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
				:column-gap="columnGap" @changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<u--text :lines="2" :text="item.title" size="20" bold></u--text>
								</view>
								<view class="waterfall-item__ft__title">
									<text class="value2">￥{{item.price}}</text>
								</view>
								<view style="display:flex;text-align:center;color:#c2c2c2;margin: 5px;">
									<u--image shape="circle" :src="item.icon" width="30px" height="30px">
										<template v-slot:loading>
											<u-loading-icon color="red"></u-loading-icon>
										</template>
									</u--image>
									<text style="margin:0 0 0 5px;">{{item.nick_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<u--text :lines="2" :text="item.title" size="20" bold></u--text>
								</view>
								<view class="waterfall-item__ft__title">
									<text class="value2">￥{{item.price}}</text>
								</view>
								<view style="display:flex;text-align:center;color:#c2c2c2;margin: 5px;">
									<u--image shape="circle" :src="item.icon" width="30px" height="30px">
										<template v-slot:loading>
											<u-loading-icon color="red"></u-loading-icon>
										</template>
									</u--image>
									<text style="margin:0 0 0 5px;">{{item.nick_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view>
	</view>
</template>

<script>
	import {guid} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		props: {
			background: {
				type: String,
				default: 'linear-gradient(200deg, #ecf5ff, #fdf6ec);'
			},
			isShowArrow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				capsuleTop: '', //胶囊距离屏幕顶部的距离
				capsuleHeight: '', //胶囊高度
				navbarHeight: '', //导航栏高度
				swidth: '',
				pla: {
					type: "String",
					default: '123'
				},
				optionVal: '', // 选中列表的值
				sizelist: [{
					name: '品牌',
					content: [{
							label: '品牌1',
							value: '1'
						},
						{
							label: '品牌2',
							value: '2'
						},
						{
							label: '品牌3',
							value: '3'
						},
					]
				}, {
					name: '成色',
					content: [{
							label: '全新',
							value: '1'
						},
						{
							label: '几乎全新',
							value: '2'
						},
						{
							label: '轻微使用痕迹',
							value: '3'
						},
						{
							label: '明显使用痕迹',
							value: '4'
						},
					]
				}],
				listData: [ // 列表数据
					{
						label: '北京',
						value: '1',
					},
					{
						label: '上海',
						value: '2',
					},
					{
						label: '重庆',
						value: '3',
					},
					{
						label: '成都',
						value: '4',
					}
				],
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 10,
				rightGap: 10,
				columnGap: 10,
				loadStatus: 'loadmore',
				page: 1,
				photosearch: [],
				keyword: '',
				Product1: '',
				text: '',
				flag1:false,
				flag2:true
			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad(e) {
			console.log(e.Product);
			this.keyword=e.Product
			const {data} = await this.getData(this.page);
			this.list = data;
			/*#ifdef H5*/
			// 在浏览器端（H5）执行的逻辑
			console.log('Running on H5');
			this.capsuleTop = 0,
				this.capsuleHeight = 30,
				this.navbarHeight = 40,
				this.swidth = uni.getWindowInfo().windowWidth
			/*#endif*/

			/*#ifdef MP-WEIXIN*/
			// 微信小程序端执行的逻辑
			const w = uni.getMenuButtonBoundingClientRect().left;
			this.swidth = w - 40;
			console.log('Running on WeChat Mini Program');
			const App = getApp();
			this.capsuleTop = App.globalData.capsule.top,
				this.capsuleHeight = App.globalData.capsule.height,
				this.navbarHeight = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App
				.globalData.capsule.height + App.globalData.system.statusBarHeight
			/*#endif*/
			// 获取应用实例

		},
		// 触底加载更多
		async onReachBottom() {
			if (this.loadStatus == 'loadmore') {
				this.loadStatus = 'loading';
				const {data} = await this.getData(this.page+1);
				this.page++;
				this.list.push.apply(this.list, data);
				this.loadStatus = 'loadmore';
			}
		},
		methods: {
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData(page) {
				const _this = this //不然this.拿不到
				var photosearch = []
				return new Promise((resolve) => {
					let list = [];
					uni.request({
						method: 'GET',
						url: getApp().globalData.url + '/good/Search',
						data: {
							type: _this.type,
							page: page,	
							text: _this.keyword
						},
						success(res) {
							console.log(res);
							_this.qwe = res.data
							if(res.data.length==0&&_this.page==1){
								_this.flag1=true
								_this.flag2=false
								console.log("没查到");
							}else if(res.data.length>0){
								_this.qwe.map((item, index) => {
									photosearch.push(
										Object.assign({
											src: item.src
										}, {
											name: item.description
										}, {
											id: item.id
										}, {
											price: item.price
										}, {
											nickname: item.nickName
										}, {
											icon: item.icon
										})
									)
								})
								// console.log(photosearch);
								const doFn = (i) => {
									const randomIndex = Math.floor(Math.random() * photosearch.length);
									return {
										id: guid(),
										allowEdit: i == 0,
										image: getApp().globalData.img_url + photosearch[randomIndex].src,
										w: photosearch[randomIndex].width,
										h: photosearch[randomIndex].height,
										title: photosearch[randomIndex].name,
										desc: photosearch[randomIndex].name,
										price: photosearch[randomIndex].price,
										nick_name: photosearch[randomIndex].nickname,
										icon: getApp().globalData.img_url +photosearch[randomIndex].icon
									}
								};
								// 模拟异步
								setTimeout(() => {
									for (let i = 0; i < 20; i++) {
										list.push(doFn(i));
									}
									resolve({
										data: list
									});
								}, 200)
							}else if(res.data.length==0&&_this.page!=1){
								console.log("多页");
								_this.page=1
								uni.request({
									method: 'GET',
									url: getApp().globalData.url + '/good/Search',
									data: {
										type: _this.type,
										page: _this.page,	
										text: _this.keyword
									},
									success(res) {
										_this.qwe = res.data
										_this.qwe.map((item, index) => {
											photosearch.push(
												Object.assign({
													src: item.src
												}, {
													name: item.description
												}, {
													id: item.id
												}, {
													price: item.price
												}, {
													nickname: item.nickName
												}, {
													icon: item.icon
												})
											)
										})
										// console.log(photosearch);
										const doFn = (i) => {
											const randomIndex = Math.floor(Math.random() * 8);
											return {
												id: guid(),
												allowEdit: i == 0,
												image: getApp().globalData.img_url + photosearch[randomIndex].src,
												w: photosearch[randomIndex].width,
												h: photosearch[randomIndex].height,
												title: photosearch[randomIndex].name,
												desc: photosearch[randomIndex].name,
												price: photosearch[randomIndex].price,
												nick_name: photosearch[randomIndex].nickname,
												icon: getApp().globalData.img_url +photosearch[randomIndex].icon
											}
										};
										// 模拟异步
										setTimeout(() => {
											for (let i = 0; i < 20; i++) {
												list.push(doFn(i));
											}
											resolve({
												data: list
											});
										}, 200)
									}
								})
							}
						}
					})
				})
			},
			handleGoToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			fnChange(e) {
				this.optionVal = e
			},
			getImgHeight2(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: e => {
							resolve(e.height)

						},
						fail: e => {
							reject(e)
						}
					})

				})
			},
			searchBank(e) {
				if (e != null && e != "") {
					uni.redirectTo({
						url: '/pages/ProductListPage/ProductListPage?Product=' + e
					});
				}
			},
			img1(e) {
				uni.navigateTo({
					url: '/pages/ProductDetailsPage/ProductDetailsPage?item=' + encodeURIComponent(JSON.stringify(
						e))
				});
			},
			img2(e) {
				uni.navigateTo({
					url: '/pages/ProductDetailsPage/ProductDetailsPage?item=' + encodeURIComponent(JSON.stringify(
						e))
				});
			},
		}
	}
</script>

<style>
	.dropdown1 {
		display: flex;
	}

	.text1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100% auto;
		/* border: 1px solid red; */
		width: 100px;
	}

	.page {
		width: 100%;
		display: flex;
		align-items: flex-start;
		padding: 0 1%;
		box-sizing: border-box;
	}

	.left {
		margin: 0 auto;
		width: 48%;
	}

	.right {
		margin: 0 auto;
		width: 48%;
	}

	.image {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border: 5rpx solid black;
		border-right-color: transparent;
		border-bottom-color: transparent;
		transform: rotate(-45deg);
	}

	.navbar {
		display: flex;
		align-items: flex-end;
		width: 100%;
		/* 设置导航栏在顶部 */
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.arrow-content {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		z-index: 999;
		display: flex;
		align-items: center;
	}

	.se {
		width: 50px;
	}
	.value2 {
		font-size: 32rpx;
		color: red;
	}
	.value {
		font-size: 32rpx;
		color: #303133;
	}
</style>